<template>
    <div class="bgcColor">
        <div class="box">
            <ul class="Choice">
                <div class="title">
                    <h2>{{page}}</h2>
                </div>
                <div class="ChoicePage">
                        <li
                            @click="Choice(item)"
                            @mousemove="ChoiceDis(item)"
                            @mouseout="delChoiceDis"
                            v-for="(item,index) in ChoiceArr" :key="index"
                            >
                            <span>{{item}}</span>
                        </li>
                </div>
            </ul>
        </div>
    </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {

    data(){
        return{
            page:"欢迎来到功能选择界面",
            ChoiceArr:[ "主控界面","运营监控","系统设置"]
        }
    },
     methods:{
      ...mapMutations("boxList", ['removeLoopList']),
        Choice(item){
            if(item=="主控界面"){
                    this.$router.push("/distribution")
            }else if(item=="运营监控") {
                    this.$router.push("/lampPage")
            }else if(item=="系统设置"){
                    this.$router.push("/LampEquipmentLibrary")
            }
        },
        ChoiceDis(item){
                this.page=item
        },
        delChoiceDis(){
            this.page="欢迎来到功能选择界面"
        },
        Jurisdiction(){
            if(sessionStorage.getItem('userRole')>1){
                this.ChoiceArr.splice(2)
            }
        },
     },
     mounted(){
         this.Jurisdiction()
        sessionStorage.removeItem('coordinate')
        this.removeLoopList()
     }
}
</script>
<style scoped>
.bgcColor {
    width: 100%;
    height:100%;
    background-color: #121212;
    display: flex;
    justify-content: center;
    align-items:center;
    min-width: 1400px;
}
.box {
    width: 100%;
    height: 100%;
    background: url(../assets/image/maintenance/bj.jpg);
    display: flex;
    justify-content: center;
    align-items:center;
}
.title {
    margin-top: -100px;
    padding-right: 80px;
    color: #ffffff;
    font-size: 20px;
}

.Choice {
    width: 1411px;
    height: 715px;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    background: url(../assets/image/maintenance/frame.png);
}
 .Choice .ChoicePage{
    display: flex;
    justify-content: center;
    align-items:center;
    margin-top: 100px;
   }
  .Choice li {
    background: url(../assets/image/maintenance/Choice.png)no-repeat;
    width: 335px;
    height: 216px;
    display: flex;
    justify-content: center;
    align-items:center;
  }
  .ChoicePage:hover {
      cursor: pointer;
  }
  .ChoicePage  li:hover span{
      font-size: 20px;
  }
  li span{
    padding-right:17px;
    font-size: 18px;
    color: #ffffff;
  }
</style>